<template>
  <div class="box">
    <!-- 搜索框部分 -->
    <van-search show-action label="VIVO" placeholder="VIVO">
      <template #action>
        <div>搜索</div>
      </template>
    </van-search>
    <!-- 轮播图组件 -->
    <swipe></swipe>
    <div style="width: 100%">
      <!-- 懒加载 -->
      <van-skeleton title :row="4" v-if="ske" row-width="100%" />
      <!-- 宫格组件 -->
      <div v-else>
        <van-grid :column-num="4">
          <van-grid-item
            v-for="item in catitemsApiData"
            :icon="item.image_src"
            :text="item.name"
          />
        </van-grid>
        <van-grid :column-num="4">
          <van-grid-item
            v-for="item in catitemsApiData"
            :icon="item.image_src"
            :text="item.name"
          />
        </van-grid>
      </div>
    </div>
    <img
      src="../../../img/jietu.png"
      alt=""
      style="width: 100%; height: 200px"
    />
  </div>
</template>

<script setup>
import swipe from "@/components/swipe.vue";

// 接口引入
import { catitemsApi } from "@/api/api";
import { ref } from "vue";
// 商品列表接口渲染
let catitemsApiData = ref([]);
let ske = ref(true);
catitemsApi().then((res) => {
  console.log(res);
  catitemsApiData.value = res.data.message;

  if (catitemsApiData.value.length > 0) {
    ske.value = false;
  }
});
// 懒加载
</script>

<style lang="scss" scoped>
</style>